<template>
  <div class="dia-box">
    <el-dialog v-model="dialogVisible" :title="props.viewType === 0 ? '毕业审核' : '查看审核'" width="1110px">
      <div class="bottom">
        <div class="application-info item">
          <h3 class="title">毕业申请信息</h3>
          <el-table :data="applicationData" style="width: 100%;" border>
            <el-table-column align="center" label="学员姓名" prop="studentName"></el-table-column>
            <el-table-column align="center" label="申请毕业课程" prop="courseName"></el-table-column>
            <el-table-column align="center" label="学习时间">
              <el-table-column align="center" label="开始时间" prop="openingTime"></el-table-column>
              <el-table-column align="center" label="结束时间" prop="classEnding"></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="毕业考试成绩" prop="graduationGrades">
              <template #default="scope" v-if="props.viewType === 0">
                <el-input v-model="scope.row['graduationGrades']"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="graduation-work item">
          <h3 class="title">毕业作品上传</h3>
          <div class="wrap">
            <div class="graduation-work-left">
              <div class="file-item" v-for="(file, idx) in graduationWork.fileList" :key="idx">
                <div class="file-name">
                  <el-icon :size="14">
                    <Document />
                  </el-icon>
                  <span class="text">{{ file.file.name }}</span>
                </div>
              </div>
            </div>
            <div class="graduation-work-right">
              <el-button @click="graduationWorkView">浏览</el-button>
            </div>
          </div>
        </div>
        <div class="opt" v-if="props.viewType === 0">
          <el-button type="primary" @click="passExamine(2)">审核通过</el-button>
          <el-button type="danger" @click="reject">驳回</el-button>
        </div>
        <div class="reject-reason">
          <el-dialog v-model="reasonDia" title="驳回原因" top="20vh" width="700px">
            <el-input
              v-model="rejectReason"
              placeholder="请输入驳回原因"
              autosize
              type="textarea"
            />
            <div class="btn">
              <el-button type="danger" @click="reasonDia = false">取消</el-button>
					    <el-button type="primary" @click="comfirmReject">确定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </el-dialog>
    <GraduationWorkPreview
      v-model="graduationWork.isView"
      :fileList="graduationWork.fileList"
    />
  </div>
</template>

<script setup>
import { ref, defineProps, defineExpose, getCurrentInstance } from "vue";
import { Document } from "@element-plus/icons-vue";
import GraduationWorkPreview from './graduation-work-preview.vue';
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance()

const props = defineProps({
  viewType: {
    type: Number,
    default: 0
  }
})

const dialogVisible = ref(false)

// 课程信息
const applicationData = ref([{
  studentName: '张三',
  graduationGrades: 95
}])

// 作品信息
const applyInfo = ref({})
// 毕业作品
const graduationWork = ref({
  fileList: [],
  isView: false,
})

// 毕业作品浏览
const graduationWorkView = () => {
  graduationWork.value.isView = true;
}

// 打开弹窗
const openDialog = (row) => {
  findGraduateDetail(row)
  dialogVisible.value = true
}

// 获取申请详情
const findGraduateDetail = (row) => {
  let data = {
    gradeId: row.gradeId,
    studentId: row.studentId
  }
  proxy.$API.student.findGraduateDetail.get(data).then((res) => {
    if (res.status === 999999) {
      ElMessage({
        message: res.message,
        type: 'warning',
      })
    }else{
      applicationData.value[0] = row
      applyInfo.value = res.data
      res.data.pictures.forEach(item=> {
        graduationWork.value.fileList.push({
          file: item,
          baseUrl: ""
        })
      });
      res.data.videos.forEach(item => {
        graduationWork.value.fileList.push({
          file: item,
          baseUrl: ""
        })
      });
      graduationWork.value.fileList.forEach((item, index) => {
        blobToBase64(item, index)
      })
      applicationData.value[0].graduationGrades = res.data.score
      describeWork.value = res.data.text
    }
  })
  .catch((err) => {
    ElMessage({
      message: err,
      type: 'error',
    })
  })
}

// file转base64
const blobToBase64 = (file, index) =>{
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = function (o) {
    graduationWork.value.fileList[index].baseUrl = o.target.result
  }
}

const reasonDia = ref(false)

const reject = () => {
  reasonDia.value = true
}

const rejectReason = ref("")

//确认驳回
const comfirmReject = () => {
  if(!rejectReason.value) {
    ElMessage.warning("请输入驳回原因")
  }else{
    passExamine(0)
    reasonDia.value = false
  }
}

// 审核通过
const passExamine = (status) => {
  let data = {
    id: applyInfo.value.id,
    score: applicationData.value[0].graduationGrades,
    status: status
  }
  if (status == 0) {
    data.rejectReason = rejectReason.value
  }
  proxy.$API.student.examine.get(data).then(res => {
    dialogVisible.value = true
  })
}

defineExpose({openDialog, dialogVisible})
</script>

<style lang="scss" scoped>
.bottom {
  padding-top: 20px;
  .item {
    padding-bottom: 30px;
    .title {
      font-size: 20px;
      padding-bottom: 10px;
      color: #333;
    }
  }
  .graduation-work {
    .wrap {
      display: flex;
      .graduation-work-left {
        border: 1px solid #333;
        width: 800px;
        height: 200px;
        overflow-y: auto;
        .file-item {
          display: flex;
          flex: 1;
          padding: 5px 20px;
          height: 30px;
          justify-content: space-between;
          .file-name {
            display: flex;
            align-items: center;
            .text {
              padding-left: 5px;
            }
          }
          &:hover {
            background-color: #f5f7fa;
            cursor: pointer;
            color: #409eff;
          }
        }
      }
      .graduation-work-right {
        display: flex;
        flex-direction: column;
        margin-left: 40px;
        .el-button {
          margin-left: 0px;
          margin-bottom: 10px;
        }
      }
    }
  }
}
.dia-box {
  ::v-deep .el-dialog__body {
    border-top: 1px solid #cfcfcf;
    padding: 10px 20px;
    height: 600px;
    overflow-y: auto;
  }
  ::v-deep .el-dialog__footer {
    background: #f0f4f7;
    text-align: center;
    padding-top: 15px;
  }
}
.reject-reason {
  ::v-deep .el-dialog__body {
    height: auto;

    .el-textarea__inner {
      min-height: 300px !important;
    }
    .btn {
      text-align: center;
      padding-top: 20px;
    }
  }
}
</style>
